@extends('admin.layout')
@section('title','新增视频')
@section('content')
    <div class="app_content_div" id="app_content_div_301Index">
        <h3>新增视频</h3>
        <form class="form-horizontal"  method="post" action="/adm/video/add-video" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}" />
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label"><span style="color:red;">*</span>标题</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" name="name" >
                </div>
            </div>
            <div class="form-group">
                <label for="website" class="col-sm-2 control-label"><span style="color:red;">*</span>视频路径</label>
                <div class="col-sm-10">
                    <input type="file" class="form-control" id="website" name="website" >
                </div>
            </div>
            <div class="form-group">
                <label for="type" class="col-sm-2 control-label"><span style="color:red;">*</span>视频类型</label>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="type" id="video_type1" value="1" checked> 直播
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="type" id="video_type2" value="0"> 录播
                    </label>
                </div>
            </div>
            <div class="form-group" >
                <label for="profile" class="col-sm-2 control-label"><span style="color:red;">*</span>课程简介</label>
                <div class="col-sm-10">
                    <script id="profile" name="profile" type="text/plain"></script>
                    <script type="text/javascript">
                        var editor = UE.getEditor('profile')
                    </script>
                </div>
            </div>
            <div class="form-group">
                <label for="start_at" class="col-sm-2 control-label"><span style="color:red;">*</span>直播开始时间</label>
                <div class="col-sm-10">
                    <input type="datetime-local" step="1" class="form-control" id="start_at" name="start_at" required>
                </div>
            </div>

            <div class="form-group">
                <label for="end_at" class="col-sm-2 control-label"><span style="color:red;">*</span>直播结束时间</label>
                <div class="col-sm-10">
                    <input type="datetime-local" step="1" class="form-control" id="end_at" name="end_at" required>
                </div>
            </div>
            <div class="form-group">
                <label for="upload_file" class="col-sm-2 control-label"><span style="color:red;">*</span>缩略图</label>
                <div class="col-sm-10">
                    <input  id="upload_file" name="upload_file"  type="file" onchange="saveThumb()"/>
                    <input type="hidden" class="form-control" id="img_thumb" name="img_thumb" >
                    <img style="width:320px; height:200px;" alt="" id="thumb" src="/assets/test_images/e2.jpg"  />
                </div>
            </div>
            <div class="form-group">
                <label for="expertlist" class="col-sm-2 control-label"><span style="color:red;">*</span>关联专家</label>
                <div class="col-sm-10">
                    <select id="expert">
                        <option value="">select</option>
                        @foreach($oExpert as $v)
                            <option value="{{$v->id}}">{{$v->name}}</option>,
                        @endforeach
                    </select>
                    <button class="btn btn-default" type="button" onclick="addexpert()">添加</button>
                    <div id="expertlist" name="expertlist"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">确定</button>
                </div>
            </div>
        </form>
    </div>
    <script>
        $(function () {
            $('.ui_timepicker').datetimepicker({
                format: 'YYYY-MM-DD HH:mm:ss'
            });
        });

        function addexpert() {
            var expert = $('#expert option:selected');
            var flag = true;
            var experthtml = '';
            if (expert.val()) {
                $('#expertlist').find('input').each(function () {
                    if ($(this).val() == expert.val()) {
                        flag = false;
                        return false;
                    }
                });
                if (flag) {
                    experthtml += '<div>';
                    experthtml += '    <input type="hidden" value="' + expert.val() + '" name="expertid[]">';
                    experthtml += '    <span class="expert">' + expert.text() + '</span>';
                    experthtml += '    <span class="glyphicon glyphicon-remove mouse" onclick="$(this).parent().remove()"></span>';
                    experthtml += '</div>';
                    $('#expertlist').append(experthtml);
                } else {
                    alert('您已经添加过该专家');
                    return false;
                }
            } else {
                alert('请先选择一个专家');
                return false;
            }
        }

        function saveThumb() {
            var startAt = $('#start_at').val();
            var endAt = $('#end_at').val();

            $.ajaxFileUpload({
                url: "/adm/expert/upload-doc-thumb",
                secureuri: false,
                fileElementId: "upload_file",
                dataType: "json",
                data: {
                    _token: $("#_token").val(),
                    start_at: startAt,
                    end_at: endAt
                },
                success: function(data, status) {
                    if (data.success) {
                        $("#photo").val(data.photo);
                        $("#thumb").attr("src", data.photo);
                        alert("上传成功");
                    } else {
                        alert(data.msg);
                    }
                }
            });
        }

        function uploadVideo() {
            var file = document.getElementById('video_file').files[0];
            var formData = new FormData();
            formData.append('file', file);
            formData.append('_token', '{{ csrf_token() }}');

            $.ajax({
                url: '/adm/video/upload-video',
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.success) {
                        $("#website").val(data.url);
                        alert("视频上传成功");
                    } else {
                        alert("视频上传失败: " + data.msg);
                    }
                },
                error: function () {
                    alert("视频上传过程中发生错误");
                }
            });
        }
    </script>

@endsection
